//后台用户管理

<template>
  <div >
    <el-col :span="24" >
      <div id="su-zd">
        <div class="su-t"></div>
        <div class="su-e">
          <div class="su-e-con">
            <span class="su-sp1">姓名：</span>
            <input class="su-in1" v-model="sfrom.fname" type="text">
            <span class="su-sp1">工号：</span>
            <input class="su-in1" v-model="sfrom.fnumber" type="text">
            <button class="su-btn1" @click="search">搜索</button>
            <button class="su-btn2" @click="reset">重置</button>
          </div>
        </div>
        <button class="su-btn3" @click="dialogVisible11= true">新建管理员</button>
        <div id="useManagement">
          <!--斑马纹表格-->
          <el-table
                  :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                  tooltip-effect="dark"
                  style="width: 100%">
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="Jnumber"
                    label="工号"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="tel"
                    label="电话"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="role"
                    label="角色"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="state"
                    label="状态"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="operation"
                    label="操作"
                    width="150">
              <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!------------------------------------------------->
          <!--页码-->
          <el-pagination
                  background
                  @current-change="current_change"
                  layout="prev, pager, next"
                  :total="total"
                  :page-size="pagesize">
          </el-pagination>
        </div>
      </div>
      <!--编辑弹框-->
      <el-dialog
              title="管理员编辑"
              :visible.sync="dialogVisible"
              width="30%"
              style="text-align: left"
              >
        <hr>
        <p class="su-p1">
          <span class="su-t-sp">姓名：</span>
          <input class="su-t-in" value="" v-model="fromb.b_name" type="text">
          <span class="su-t-sp">工号：</span>
          <input class="su-t-in" v-model="fromb.b_id" type="text">
        </p>
        <p class="su-p2">
          <span class="su-t-sp">手机号：</span>
          <input class="su-t-in" v-model="fromb.b_phone" type="text">
          <span class="su-t-sp">密码：</span>
          <input class="su-t-in" v-model="fromb.b_pass" typeof="password">
        </p>
        <p class="su-p3">
          <!--下拉框-->
          <span class="su-t-sp">角色:</span>
          <el-select v-model="roledata" placeholder="请选择">
            <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label">
            </el-option>
          </el-select>
          <span class="su-t-sp">状态：</span>
          <!--开关-->
          <el-switch
                  v-model="valuebk"
                  active-text="启用"
                  inactive-text="禁用"
                  active-color="#3696FF"
                  inactive-color="#ff4949">
          </el-switch>
        </p>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleChange">保 存</el-button>
  </span>
      </el-dialog>
      <!--新建弹框-->
      <el-dialog
              title="新建管理员"
              :visible.sync="dialogVisible11"
              width="30%"
              style="text-align: left"
      >
        <hr>
        <p class="su-p1">
          <span class="su-t-sp ">姓名：</span>
          <input class="su-t-in s-xname" v-model="from.namex" type="text">
          <span class="su-t-sp">密码：</span>
          <input class="su-t-in s-xpass" v-model="from.passx" typeof="password">
          <!--<span class="su-t-sp">工号：</span>
          <input class="su-t-in s-xJnum" v-model="from.numberx" type="text">-->
        </p>
        <p class="su-p2">
          <span class="su-t-sp">手机号：</span>
          <input class="su-t-in s-xtel" v-model="from.telx" type="text">
          <span class="su-t-sp">角色选择:</span>
          <el-select v-model="from.valuea" placeholder="请选择">
            <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
          </el-select>
        </p>
        <p class="su-p3">
          <span class="su-t-sp">状态：</span>
          <!--开关-->
          <el-switch
                  v-model="valueak"
                  active-color="#3696FF"
                  inactive-color="#ff4949"
                  active-text="启用"
                  inactive-text="禁用">
          </el-switch>
        </p>
        <!--树杈-->
        <!--<div class="su-sc">-->
          <!--<el-tree-->
                  <!--:data="data"-->
                  <!--show-checkbox-->
                  <!--node-key="id"-->
                  <!--:props="defaultProps">-->
          <!--</el-tree>-->
        <!--</div>-->
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible11 = false">取 消</el-button>
    <el-button type="primary" @click="handleConfirm">确 定</el-button>
  </span>
      </el-dialog>
    </el-col>
  </div>
</template>

<style lang="less">
  #su-zd{
    width: 100%;
    height: 100%;
    background: rgb(240,240,248);
  }
  .su-t{
    width: 100%;
    height: 56px;
    background: white;
    /*border-top-right-radius: 20px;*/

  }
  .su-e{
    width: 900px;
    height: 56px;
    background: white;
    border-radius: 5px;
    margin: 10px auto 0;
    .su-e-con{
      text-align: left;
      line-height: 56px;
      .su-sp1{
        display: inline-block;
        margin-left: 20px;
        font-size: 16px;
      }
      .su-in1{
        width: 200px;
        height: 28px;
        border-radius: 4px;
        border: 1px solid rgb(192,192,192);
      }
      .su-btn1{
        width: 80px;
        height: 30px;
        border-radius: 3px;
        border: none;
        color: white;
        background: #3696FF;
        margin-left: 150px;
      }
      .su-btn2{
        width: 80px;
        height: 30px;
        border-radius: 3px;
        border: none;
        color: white;
        background: #21B9BC;
        margin-left: 20px;
      }
    }

  }
  .su-btn3{
    width: 100px;
    height: 30px;
    cursor: pointer;
    margin-left: -800px;
    margin-top: 20px;
    border-radius: 3px;
    border: none;
    color: white;
    background: #FD5056;
  }
  #useManagement{
    width: 900px;
    height: 500px;
    margin:10px auto;
    border-radius: 3px;
    .el-table{
      height: 430px;
    }
    .el-table td, .el-table th{
      text-align: center;
    }
    .el-pagination{
      margin-top: 30px;
    }

  }
  /*编辑弹框*/
  .el-dialog{
    .el-dialog__header{
      text-align: center;
      font-weight: bold;
    }
    .el-dialog__body{
      padding: 0;
      .su-p1{
        margin-top: 20px;
        height: 50px;
        line-height: 50px;
        .su-t-sp{
          display: inline-block;
          width: 100px;
          font-size: 18px;
          font-weight: bold;
          text-align: right;
        }
        .su-t-in{
          /*width: 100px;*/
          height: 30px;
          border-radius: 2px;
          border: 1px solid #DCDFE6;
        }
      }
      .su-p2{
        height: 50px;
        line-height: 50px;
        .el-select{
          width: 171px;
          height: 32px;
        }
        .su-t-sp{
          display: inline-block;
          width: 100px;
          font-size: 18px;
          font-weight: bold;
          text-align: right;
        }
        .su-t-in{
          /*width: 100px;*/
          height: 30px;
          border-radius: 2px;
          border: 1px solid #DCDFE6;
        }
      }
      .su-p3{
        margin-top: 20px;
        .su-t-sp{
          display: inline-block;
          width: 100px;
          font-size: 18px;
          font-weight: bold;
          text-align: right;
        }
      }
      .su-sc{
        .el-tree{
          margin-top: 20px;
          margin-left: 90px;
        }
      }
    }
    .el-dialog__footer{
      margin-top: 20px;
      text-align: center;
    }
  }
  /*新建弹框*/



</style>

<script>
    export default {
        inject:['reload'],
        data() {
            return {
                pagesize:6,
                currentPage:1,
                total:0,
                //编辑值
                fromb:{
                    bid:'',
                    bname:'',
                    bnumber:'',
                    bpass:'',
                    btel:'',
                    valueb:'',
                    rolestate: true
                },
                fromc:{},
                //搜索
                sfrom:{
                    fname:'',
                    fnumber:''
                },
                state:['禁用','启用'],
               /* role: new Map([
                    ["超级管理员", 1],
                    ["管理员", 2],
                    ["普通", 3],]
                ),*/
                valuebk:true,
                valueak:true,
                //新建用户数据
                from:{
                    namex:'' ,
                    telx:'',
                    passx:'',
                    valuea:''
                },
                //下拉选项
                options: [],
                roledata: '',
                dialogVisible: false,
                dialogVisible11: false,
                //斑马条（中间内容）
                tableData: [],
                multipleSelection: [],
                rid:0
            }
        },

        methods: {
            //页码
            current_change:function(currentPage){
                this.currentPage = currentPage;
            },
            //编辑用户-获取值
            handleEdit(index, row) {
               this.$axios({
                   url:'/api/GetPass',
                   method:'post',
                   data:{
                       Gpass:row.Jnumber
                   }
               }).then((res)=>{
                   this.fromb = res.data[0];
                   this.fromc=res.data[0];
                   this.valuebk = !!this.fromb.b_state;
                   this.roledata = this.fromb.r_name;
                   this.dialogVisible = true;
               });


            },
            //编辑用户-修改
            handleChange(){
                console.log(this.options);
                for(let i=0;i<this.options.length;i++){
                    if(this.options[i].label===this.roledata){
                        this.rid=this.options[i].value
                    }
                }
                this.dialogVisible = false;
                this.$axios({
                    url:'/api/Change',
                    method:'post',
                    data:{
                        cid:this.fromb.b_id,
                        cnamea:this.fromb.b_name,
                        cnumber:this.fromb.b_id,
                        cpass:this.fromb.b_pass,
                        ctel:this.fromb.b_phone,
                        cvalue1:this.rid,
                        cstate: this.valuebk? 1 : 0
                    }
                }).then((res)=>{
                        console.log(res.data);
                    alert('修改成功');
                    this.reload();
                })

            },
            /*删除用户*/
            handleDelete(index, row) {
                this.$axios({
                    url:'/api/sdele',
                    method:'post',
                    data:{
                        snumber:row.Jnumber
                    }
                }).then((res)=>{
                    this.reload();
                    alert(res.data.msg)
                })
            },
            /*添加用户*/
            handleConfirm(){
                this.dialogVisible11 = false;
                this.$axios({
                    url:'/api/hcreate',
                    method:'post',
                    data: {
                        xpass: this.from.passx,
                        xname: this.from.namex,
                        xtel: this.from.telx,
                        xoption: this.from.valuea,
                        xstate: this.valueak?1:0,
                    }
                }).then((res)=>{
                      if(res.data.error==0){
                          this.reload();
                          alert('创建成功')
                      }
                })

            },
            /*搜索内容*/
            search(){
                this.tableData=[];
                this.$axios({
                    url:'/api/Search',
                    method:'post',
                    data:{
                        sname:this.sfrom.fname,
                        snumber:this.sfrom.fnumber
                    }
                }).then((res)=>{
                    for (let i = 0; i < res.data.length; i++) {
                        let arr = {
                            name: res.data[i].b_name,
                            Jnumber: res.data[i].b_id,
                            tel: res.data[i].b_phone,
                            role:res.data[i].r_name,
                            state: this.state[res.data[i].b_state]
                        };
                        this.tableData.push(arr);
                    }
                })
            },
            /*重置*/
            reset(){
                this.sfrom.fname='';
                this.sfrom.fnumber=''
            }
        },
        activated(){
            this.tableData()
        },
        updated:function(){
            this.total=this.tableData.length;
        },
        mounted:function () {
            /*中间内容*/
            this.$axios({
                url: '/api/huser',
                method: 'post',
                data: {},

            }).then((res) => {
                for (let i = 0; i < res.data.length; i++) {
                    let arr = {
                        name: res.data[i].b_name,
                        Jnumber: res.data[i].b_id,
                        tel: res.data[i].b_phone,
                        role:res.data[i].r_name,
                        state: this.state[res.data[i].b_state]
                    };
                    this.tableData.push(arr);
                }
            });

            /*下拉菜单获取*/
            this.$axios({
                url:'/api/soption',
                method:'post',
                data:{},
            }).then((res)=>{
                for(let i=0; i<res.data.length; i++){
                    let arr={
                        value:res.data[i].r_id,
                        label: res.data[i].r_name
                    };
                    this.options.push(arr)
                }
            });
            //console.log(this.huser.r_id)

        },


    }
</script>